<template>
  <Header/>
  <main class="container max-w-screen-xl mx-auto p-4 md:px-6 py-4">
    <div class="grid grid-cols-4 gap-4">
      <div class="col-span-4 md:col-span-3">
        <CategoryInfo/>
        <div v-if="total != 0">
          <div class="p-5 mb-4 border border-gray-100 rounded-lg bg-white shadow dark:bg-gray-800 dark:border-gray-700">
            <time class="text-lg font-semibold text-gray-900 dark:text-blue-200">{{ categoryName }}</time>
            <ol @click="gotoArticleDetail(item.id)" v-for="item in articleList" :key="item.id"
                class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
              <li class="cursor-pointer">
                <p class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
                  <img class="w-12 h-12 mb-3 me-3 rounded-full sm:mb-0" :src="item.cover" alt="Jese Leos image"/>
                  <div class="text-gray-600 dark:text-gray-400">
                    <div class="text-base font-normal dark:text-blue-100">{{ item.title }}</div>
                    <!-- 发布时间 -->
                    <div class="flex items-center text-xs mt-2 dark:text-blue-100">
                      <svg class="inline w-3 h-3 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                           xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                              stroke-width="2"
                              d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"/>
                      </svg>
                      {{ item.createDate }}
                    </div>
                  </div>
                </p>
              </li>
            </ol>
          </div>
          <nav class="flex items-center justify-center mt-4" aria-label="Page navigation example">
            <h2 class="mr-4 dark:text-blue-200">共{{ total }}篇文章</h2>
            <ul class="flex items-center -space-x-px h-10 text-base">
              <li>
                <p class="cursor-pointer flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <span class="sr-only">Previous</span>
                  <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                       viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M5 1 1 5l4 4"/>
                  </svg>
                </p>
              </li>
              <li v-for="index in pageSize" :key="index" @click="changePage(index)">
                <p class="cursor-pointer flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  {{ index }}
                </p>
              </li>
              <li>
                <p class="cursor-pointer flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <span class="sr-only">Next</span>
                  <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                       viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="m1 9 4-4-4-4"/>
                  </svg>
                </p>
              </li>
            </ul>
          </nav>
        </div>
        <div v-else class="flex justify-center items-center mt-4 flex-col p-5 mb-4 border border-gray-100 rounded-lg bg-white shadow dark:bg-gray-800 dark:border-gray-700">
            <svg t="1708609316056" class="icon" viewBox="0 0 2534 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="28861" width="200" height="200">
              <path
                  d="M785.961 1119.995c-31.607 15.7-44.281 63.010-22.137 100.861 21.949 37.849 63.010 56.761 97.645 37.849 31.607-18.917 44.094-63.027 22.137-100.865-21.949-37.843-63.010-56.777-97.645-37.843zM105.479 553.427c-7.951-5.867-18.171-6.445-26.874-1.329-8.51 4.917-14.192 14.576-14.761 25.355s3.979 21.005 12.114 26.866c7.949 5.875 18.164 6.429 26.874 1.329 8.51-4.917 14.182-14.572 14.757-25.347 0.571-10.788-3.972-21.009-12.105-26.874zM613.382 113.471c25.169 6.432 53.554-12.487 63.010-41.067 9.46-31.404-6.438-63.013-31.607-69.257-25.169-6.247-53.546 9.644-63.010 41.067-9.46 31.401 6.432 63.009 31.607 69.257zM1590.388-173.978c22.151-3.024 34.818-25.169 31.613-44.094-3.222-18.917-28.4-28.388-50.546-22.137-22.13 3.026-37.837 25.169-31.595 44.094 3.211 18.737 28.398 31.418 50.524 22.137zM1927.025 1066.43c-22.142 9.46-34.813 34.626-22.142 63.010 12.697 28.4 37.854 41.069 59.994 31.607 21.954-9.453 34.628-34.618 22.142-63.010-12.688-28.384-37.861-41.067-59.994-31.607zM2421.865 243.66c-28.398-6.247-53.758 9.472-60 31.607-3.008 21.949 12.681 47.31 41.072 53.554 28.372 6.247 53.723-9.466 59.985-31.607 3.23-25.355-12.665-47.307-41.056-53.554zM1193.069 79.615c0.207 0.023 0.33 0.001 0.396-0.037-0.065 0.041-0.192 0.058-0.396 0.037zM1192.72 79.225c-2.254-0.836-4.861-1.334-7.58-1.367l6.313 0.99 1.266 0.375zM1517.555 115.786l-0.412 0.004c-0.285 0.027-0.571 0.027-0.841 0.074 0.444-0.065 0.813-0.041 1.255-0.090zM1183.591 76.318c0.423 0.339 0.848 0.647 1.262 0.949 0.558 0.047 1.184 0.266 1.772 0.388-1.495-0.571-2.747-1.103-3.033-1.329z"
                  p-id="28862" fill="#707070"></path>
              <path
                  d="M1523.225 115.631c-2.598 0.203-16.133 0.626-6.076 0.175 0.347-0.037 0.706-0.069 1.056-0.096-2.078 0.066-4.027 0.214-5.956 0.444 5.565-0.427 5.823-0.444 6.082-0.459 0.686-0.058 1.343-0.108 2.038-0.116 0.183-0.001 0.394-0.033 0.571-0.041-26.979 0.626-49.111-8.742-65.548-30.363-4.905-6.447-15.581-17.549-23.573-8.736-10.177 11.191-0.754 25.939 7.046 35.294 18.266 21.913 46.801 31.868 74.779 32.193 25.795 0.292 31.712-26.864 9.575-28.298zM1184.859 77.264c-8.611-0.768-14.090 6.703-18.795 13.658-7.691 11.346-18.153 18.896-31.149 23.232-8.369 2.837-18.016 4.571-28.038 4.766 0.624 0.246-10.128-3.419-16.209-0.893-9.66 4.006-7.809 16.124-1.462 22.249 17.7 17.12 60.845-3.637 77.121-13.941 11.343-7.187 23.207-16.832 28.329-29.662 5.263-13.199-1.723-13.566-9.795-19.411z"
                  p-id="28863" fill="#707070"></path>
              <path
                  d="M1522.141 115.541l0.148 0.003c0.237 0 0.501-0.003 0.731 0-0.298 0.001-0.577-0.021-0.875-0.003zM1518.999 115.684c-0.49 0.027-0.948 0.058-1.441 0.103l4.861-0.217-3.331 0.108c1.361-0.047 2.564-0.096 3.266-0.108l-0.079-0.001c-0.621 0-1.262 0.001-1.905 0.021-0.442 0.003-0.908 0.069-1.361 0.103l-0.004-0.001zM1522.425 115.568l0.595-0.004-0.591 0.004zM1187.761 77.891c-0.389-0.108-0.754-0.167-1.13-0.237 2.361 0.893 5.328 1.859 6.438 1.966-1.017-0.139-3.471-1.018-5.305-1.73zM1188.341 77.981l2.444 0.658c-3.13-1.021-7.069-2.275-4.994-1.536l-0.178-0.074c0.178 0.084 0.371 0.13 0.549 0.207l-0.375-0.13c0.339 0.148 1.059 0.442 1.968 0.795 0.304 0.090 0.577 0.084 0.89 0.192-0.532-0.22-1.151-0.347-1.799-0.348l1.506 0.234zM1518.338 115.702h-0.001zM1518.999 115.684z"
                  p-id="28864" fill="#707070"></path>
              <path
                  d="M1523.225 115.631c0.55-0.037 0.615-0.079-0.203-0.090l-0.549 0.023c0.257 0.003 0.49 0.041 0.754 0.065zM1193.469 79.571c1.134 0.339-0.108-0.096-2.018-0.724-1.063-0.298-2.122-0.549-2.802-0.771 2.735 0.867 4.157 1.307 4.823 1.498z"
                  p-id="28865" fill="#707070"></path>
              <path
                  d="M1596.915 26.567c-11.71-2.543-23.531-12.909-34.141-18.416-60.604-31.386-128.517-50.956-201.78-57.473-145.001-13.509-370.741 29.763-519.871 215.231-74.173 92.247-119.28 206.289-125.649 324.677-1.483 27.568 0.507 46.369-19.974 66.88-23.177 23.237-46.422 46.397-68.546 70.619-39.658 43.434-78.548 91.62-98.596 147.642-17.79 49.723-16.595 104.698 17.317 147.281 34.43 43.229 90.221 62.254 143.306 69.223 61.803 8.095 125.167 1.905 186.417-7.742 31.276-4.917 53.119-11.713 79.734 8.931 23.691 18.387 47.855 34.757 74.561 48.547 203.534 105.191 461.353 75.959 639.159-66.803 87.404-70.171 153.070-166.156 187.868-272.633 18.654-57.092 19.639-230.014 19.73-244.429 268.206-211.76 378.891-596.93-279.518-431.545M686.117 944.287c-42.86-6.822-91.574-21.916-113.525-62.849-27.18-50.686 2.361-108.478 30.277-151.791 32.629-50.617 72.78-95.829 114.514-139.060 14.795 130.245 75.762 254.556 169.196 346.431-27.347 4.861-137.155 17.339-200.469 7.267M1658.379 925.805zM1657.518 928.812c0.326-0.781 0.582-1.558 0.754-2.368-0.222 1.35-0.549 2.757-0.906 3.056 0.058-0.217 0.096-0.46 0.148-0.686-4.423 10.468-21.868 18.466-29.717 23.411-19.813 12.502-39.126 25.493-59.599 36.944-42.277 23.678-169.157 64.494-177.55 66.529-47.453 11.558-97.122 9.254-145.311 4.459-94.606-9.41-184.541-46.693-264.545-96.938 105.862-29.247 206.291-74.714 304.727-122.777 101.084-49.338 200.813-101.887 295.447-162.826 17.395 44.101 2.915 94.733 35.401 133.596 12.807 15.322 29.44 26.707 37.787 45.499 9.52 21.396 8.69 49.651 3.351 72.112h0.001M1741.396 411.9c-7.414-16.651-5.759-35.364-10.215-52.74-5.15-20.129-19.574-35.691-34.874-48.942 13.469 2.13 31.222 10.467 40.59-4.559 10.784-17.316-9.107-26.731-22.339-30.785-41.995-12.89-89.168-13.045-132.609-17.981-46.62-5.295-93.808-11.618-140.717-13.294-14.269-0.507-41.002-4.491-51.705 8.308-10.855 12.974 2.252 30.869 17.066 31.313 11.813 0.354 31.505-6.491 30.758 11.415-0.54 12.901-5.648 25.046-7.566 37.725-6.77 44.844 11.786 80.923 37.761 115.697 11.535 15.438 23.007 31.58 28.064 50.465 5.474 20.449 3.709 41.858 6.193 62.708 5.031 42.208 35.811 58.403 61.511 87.53-107.931 65.706-219.168 126.272-334.79 177.39-58.942 26.057-119.020 49.641-180.341 69.51-30.658 9.92-61.929 17.744-92.86 26.726-29.089 8.435-47.952-25.245-65.051-43.671 41.226-25.217 103.686-49.619 115.138-102.381 5.474-25.235 2.527-51.363 8.64-76.617 6.401-26.45 20.397-46.377 40.199-64.548 16.599-15.227 33.822-30.306 41.023-52.426 8.964-27.522 3.351-57.162 10.475-85.020 6.614-25.897 25.571-44.855 40.942-65.762 16.329-22.21 24.686-47.385 24.479-75.014-0.148-19.724-8.308-38.761-8.085-58.097 0.306-27.271 43.503-0.994 49.358-27.701 6.281-28.607-37.884-24.022-53.191-22.448-31.79 3.265-63.844 4.4-95.687 7.287-59.648 5.411-121.235 9.3-179.653 23.051-11.707 2.759-36.795 10.295-29.181 27.189 8.396 18.62 32.59 8.925 47.337 6.445-25.593 21.898-34.874 43.434-39.478 76.221-4.26 30.291-24.183 50.678-40.766 74.926-19.122 27.988-7.716 59.012-15.289 89.774-7.9 32.118-41.586 49.909-50.817 82.962 2.987-41.579 0.326-81.998-0.364-123.495-0.692-41.734 8.387-84.94 19.225-125.063 20.862-77.21 59.324-149.259 111.699-209.679 103.129-118.944 255.494-188.991 413.043-188.991 133.967 0 265.443 53.758 364.965 142.683 50.476 45.089 92.86 99.338 123.233 159.869 28.583 55.844 49.933 152.103 50.965 158.261-7.379 9.367-35.709 30.47-49.335 41.345-4.060-32.518-35.074-51.145-47.737-79.594l-0.001-0.001M1834.569 616.516c-10.348-25.556-37.478-39.366-43.951-67.211 0.069-33.26 27.634-35.538 50.809-64.011 1.259 16.929-1.695 101.37-6.851 131.229M1634.093 60.499c186.558-67.498 672.214-67.625 235.735 358.164 0.001 0-43.498-240.796-235.735-358.164z"
                  p-id="28866" fill="#707070"></path>
            </svg>
            <p class="mt-2 mb-16 text-gray-400 text-3xl">该分类还没有数据哦</p>
        </div>
      </div>
      <div class="col-span-4 md:col-span-1">
        <userInfo/>
        <TagInfo/>
      </div>
    </div>
  </main>
  <ScrollToTopButton/>
  <Footer/>
</template>

<script setup>
import Header from "@/layouts/fronted/components/Header.vue";
import CategoryInfo from "@/layouts/fronted/components/CategoryInfo.vue";
import UserInfo from "@/layouts/fronted/components/UserInfo.vue";
import Footer from "@/layouts/fronted/components/Footer.vue";
import TagInfo from "@/layouts/fronted/components/TagInfo.vue";
import {useRoute, useRouter} from "vue-router"
import {onMounted, ref, watch} from "vue";
import {queryArticleByCategoryId} from "@/api/frontend/category.js"
import ScrollToTopButton from "@/components/ScrollToTopButton.vue";

const route = useRoute()

// 分类名称
const categoryName = ref(route.query.name)
// 分类 ID
const categoryId = ref(route.query.id)
const current = ref(1)
const size = ref(10)
const total = ref(0)
const articleList = ref([])
const pageSize = ref(0)
const router = useRouter()

onMounted(() => {
  getArticleInfo()
})

function getArticleInfo() {
  queryArticleByCategoryId(current.value, size.value, categoryId.value).then(resp => {
    if (resp.success) {
      if (resp.total !== 0) {
        articleList.value = resp.data
        total.value = resp.total
        pageSize.value = resp.pages
      } else {
        articleList.value = []
        total.value = resp.total
      }
    }
  })
}

// 更换界面
const changePage = (cur) => {
  current.value = cur
  getArticleInfo()
}

// 监听路由
watch(route, (newRoute, oldRoute) => {
  categoryName.value = newRoute.query.name
  categoryId.value = newRoute.query.id
  getArticleInfo()
})

function gotoArticleDetail(id) {
  router.push("/article/detail/" + id)
}

</script>

<style scoped>
.max-w-sm {
  max-width: 48rem;
}
</style>